<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>蒙版</title>
		<style>
			div {
				width: 1000px;
				height: 1000px;
				background: url("girl.jpg");

				/* 蒙版图片 */
				-webkit-mask-image: url("heart.png");

				/* 
					蒙版图片的平铺效果 
					repeat-x: 水平方向平铺;
					repeat-y: 垂直方向平铺;
					repeat: 水平和垂直方向都平铺;
					no-repeat: 不平铺;
				*/
				-webkit-mask-repeat: no-repeat;
			}

		</style>
	</head>
	<body>

		<!-- 
			浏览器: 标准浏览器(火狐, 谷歌, 欧朋, Safri...) 和 IE浏览器
			有些样式需要添加私有属性前缀才有效果
			火狐: -moz-
			IE: -ms-
			欧朋: -o-
			Chrome, Safri: -webkit-
		 -->
		 <div>
		 	
		 </div>
		
	</body>
</html>